<template>
  <div>
    <a-card :bordered="true">
      <f-search-form :more="true" @searchHandler="searchHandler">
        <f-search-form-item label="项目代码" name="projectCode"/>
        <f-search-form-item label="项目名称" name="projectName"/>
        <f-search-form-item label="专业代码" name="majorCode" slot="advanced"/>
        <f-search-form-item label="专业名称" name="majorName" slot="advanced"/>
        <f-search-form-item label="工程包代码" name="packageNo" slot="advanced"/>
        <f-search-form-item label="工程包名称" name="packageName" slot="advanced"/>
        <f-search-form-item label="领料申请人" name="userName" slot="advanced"/>
        <f-search-form-item label="领料申请时间" name="appTime" slot="advanced"/>
        <f-search-form-item label="领料申请ID" name="recDecId" slot="advanced"/>
      </f-search-form>
      <f-table ref="table" rowKey="recDecId" :columns="columns" :exportBtn="true" :multiple="true" :operator="operator"
               :params="queryParam" :api="api.recDeliBkReq"
               :scroll="{ x: 1300, y: 500 }">
        <!-- 编辑 -->
        <template v-for="col in editSlots" :slot="col" slot-scope="text, record, index" :row-selection="rowSelection">
          <div :key="col">
            <a-input v-if="
                       editingKey=== record.recDecId
                         && col ==='charOffCount'"
                     style="margin: -5px 0;background-color: #ffedd9;"
                     :value="text"
                     @change="(e) => handleChange(e.target.value, record.recDecId, col,record)"/>
            <template v-else>
              {{ text }}
            </template>
          </div>
        </template>
        <template slot="operation" slot-scope="text, record, index">
          <template>
            <span v-if="
              '' === record.recDecId
                || 0 === record.charOffCountCan
                || null === record.charOffCountCan">
              不可冲销
            </span>
            <span v-else-if="editingKey === record.recDecId">
              <a @click="() => edit(record,record.recDecId)">OK</a>
            </span>
            <span v-else>
              <a @click="() => edit(record,record.recDecId)">冲销设定</a>
            </span>
          </template>
        </template>
        <span slot="appTime" slot-scope="appTime">
          {{ appTime | format }}
        </span>
        <span slot="receivedDate" slot-scope="receivedDate">
          {{ receivedDate | format }}
        </span>
      </f-table>
      <brdrb-drawer ref="drawer"></brdrb-drawer>
    </a-card>
  </div>
</template>
<script>
  import brdrbDrawer from './recDeliBkReq_drawer.vue'
  import api from './js/api'
  import { formatDate, formatDate2 } from '../common/data'
  export default {
    name: 'TableList',
    components: {
      brdrbDrawer
    },
    data() {
      const me = this
      //操作按钮
      const operator = []
      operator.push({
        name: '冲销提交',
        icon: 'check-circle',
        that: this,
        batch: true,
        handler: function(table, that) {
          that.saveForRecDeliReq(that.dataSource)
        }
      })
      return {
        api: Object.assign(api, this.api),
        editingKey: '',
        recDecId: '',
        //列表初始化查询参数
        queryParam: {},
        // 表头
        columns: [
          {
            title: '项目代码',
            align: 'center',
            dataIndex: 'projectCode',
            width: 150,
            sorter: (a, b) => a.projectCode.length - b.projectCode.length
          },
          {
            title: '项目名称',
            align: 'center',
            dataIndex: 'projectName',
            width: 250,
            sorter: (a, b) => a.projectName.length - b.projectName.length
          },
          {
            title: '专业代码',
            align: 'center',
            dataIndex: 'majorCode',
            width: 100,
            sorter: (a, b) => a.majorCode.length - b.majorCode.length
          },
          {
            title: '专业名称',
            align: 'center',
            dataIndex: 'majorName',
            width: 100,
            sorter: (a, b) => a.majorName.length - b.majorName.length
          },
          {
            title: '工程包代码',
            align: 'center',
            dataIndex: 'packageNo',
            width: 100,
            sorter: (a, b) => a.packageNo.length - b.packageNo.length
          },
          {
            title: '工程包名称',
            align: 'center',
            dataIndex: 'packageName',
            width: 100,
            sorter: (a, b) => a.packageName.length - b.packageName.length
          },
          {
            title: '领料申请人',
            align: 'center',
            dataIndex: 'userName',
            width: 100,
            sorter: (a, b) => a.userName.length - b.userName.length
          },
          {
            title: '领料申请时间',
            align: 'center',
            dataIndex: 'appTime',
            scopedSlots: { customRender: 'appTime' },
            width: 100,
            sorter: (a, b) => a.appTime.length - b.appTime.length
          },
          {
            title: '领料申请ID',
            align: 'center',
            dataIndex: 'recDecId',
            width: 100,
            sorter: (a, b) => a.recDecId.length - b.recDecId.length
          },
          {
            title: '可冲销数量',
            align: 'center',
            dataIndex: 'charOffCountCan',
            width: 120,
            sorter: (a, b) => a.charOffCountCan.length - b.charOffCountCan.length
          },
          {
            title: '本次冲销数量',
            align: 'center',
            dataIndex: 'charOffCount',
            width: 140,
            scopedSlots: {
              customRender: 'charOffCount'
            }
          },
          {
            title: '操作',
            align: 'center',
            scopedSlots: { customRender: 'operation' },
            width: 150
          }
        ],
        operator: operator,
        dataSource: [],
        editSlots: ['charOffCount']
      }
    },
    created() {
    },
    filters: {
      format (time) {
        return formatDate2(time, 'yyyy-MM-dd')
      }
    },
    methods: {
      edit(record, key) {
        if (this.editingKey === key) {
          this.editingKey = ''
        } else {
          this.editingKey = key
        }
        if (record['charOffCountCan'] <= record['charOffCount']) {
          record['charOffCount'] = record['charOffCountCan']
        } else if (record['charOffCount'] < 0) {
          record['charOffCount'] = 0
        }
      },
      handleChange(value, key, column, record) {
        const newData = [...this.dataSource]
        const target = newData.filter((item) => key === item.recDecId)[0]

        if (record['charOffCountCan'] <= value) {
            value = record['charOffCountCan']
        } else if (value < 0) {
            value = 0
        }

        record[column] = value
        if (target) {
          newData['recDecId'] = key
          target[column] = value
          this.dataSource = newData
        } else {
          const newData2 = {}
          newData2['recDecId'] = key
          newData2[column] = value
          this.dataSource.push(newData2)
        }
      },
      saveForRecDeliReq(dataSource) {
        if (dataSource.length === 0) {
          this.$message.warn('请填写冲销数量！')
          return
        }
        for (const jsonObj in dataSource) {
          const charOffCount = jsonObj['charOffCount']
          if (charOffCount) {
            this.$message.warn('请填写冲销数量！')
            return
          }
        }

        this.axios({
          url: this.api.recDeliBkReq.add,
          method: 'post',
          data: dataSource
        }).then((data) => {
          this.editingKey = ''
          console.log(data)
          this.dataSource = []
          this.$message.success('操作成功')
          this.$refs.table.refresh()
          this.$refs.table.clearSelected()
        }).catch(function(err) {
          if (err) {
            this.editingKey = ''
            console.log(err)
          }
        })
      }
    }
  }
</script>
